<?php
$id_request = set_value('list_transaksi');
?>

<script>
    $(function () {
        $("#cari").click(function (event) {
            var v_id_request = document.getElementById('list_transaksi').value;
            $.ajax({
                url: '<?php echo base_url(); ?>index.php/content_ajax/ajax_list_transaksi',
                type: "POST",
                data: {
                    id_request: v_id_request,
                    '<?php echo $this->security->get_csrf_token_name(); ?>': '<?php echo $this->security->get_csrf_hash(); ?>'
                },
                success: function (result)
                {

                    var obres = $.parseJSON(result);
                    var err_code = obres.err_code;
                    var data_html = obres.data_html;
                    if (err_code !== "00") {
                        alert(obres.msg);
                    }
                    else
                    {
                        document.getElementById("tabel_transaksi").innerHTML = data_html;
                    }
                },
                error: function ()
                {
                    alert("Gagal melakukan pencarian, silahkan ulangi sekali lagi");
                }
            });
        });
    });


    function cariData() {
        var v_id_request = document.getElementById('list_transaksi').value;
        $.ajax({
            url: '<?php echo base_url(); ?>index.php/content_ajax/ajax_list_transaksi',
            type: "POST",
            data: {
                id_request: v_id_request,
                '<?php echo $this->security->get_csrf_token_name(); ?>': '<?php echo $this->security->get_csrf_hash(); ?>'
            },
            success: function (result)
            {

                var obres = $.parseJSON(result);
                var err_code = obres.err_code;
                var data_html = obres.data_html;
                if (err_code !== "00") {
                    alert(obres.msg);
                }
                else
                {
                    document.getElementById("tabel_transaksi").innerHTML = data_html;
                }
            },
            error: function ()
            {
                alert("Gagal melakukan pencarian, silahkan ulangi sekali lagi");
            }
        });
    }

    (function ($) {
        $.fn.toggleDisabled = function () {
            return this.each(function () {
                this.disabled = !this.disabled;
            });
        };
    })(jQuery);

    $(function () {
        $("#list_transaksi").change(function (event) {
            var v_id_request = document.getElementById('list_transaksi').value;
            $.ajax({
                url: '<?php echo base_url(); ?>index.php/content_ajax/ajax_get_pesan',
                type: "POST",
                data: {
                    id_request: v_id_request,
                    '<?php echo $this->security->get_csrf_token_name(); ?>': '<?php echo $this->security->get_csrf_hash(); ?>'
                },
                success: function (result)
                {
                    var obres = $.parseJSON(result);
                    var pesan = obres.pesan;
                    document.getElementById("isi_pesan").innerHTML = pesan;

                },
                error: function ()
                {
                    alert("Gagal melakukan pencarian, silahkan ulangi sekali lagi");
                }
            });
        });


        $("#table-content .ext .status").click(function () {
            var dataid = $(this).parent().parent().attr('dataid');
            var rowdetail = $(".detail_content[dataid='" + dataid + "']");
            rowdetail.toggle();
            $(this).next().toggleDisabled();

            if (!rowdetail.hasClass("detail_content_on")) {
                rowdetail.addClass("detail_content_on");
                $.get('<?php echo base_url(); ?>index.php/monitoring/get_transaksi_detail/' + dataid, function (data) {
                    rowdetail.children('td').append(data);
                });
            }
        });

        $("#table-content .ext .refresh").click(function () {
            var dataid = $(this).parent().parent().attr('dataid');
            $(".detail_content[dataid='" + dataid + "']").children('td').text('');
            $.get('<?php echo base_url(); ?>index.php/monitoring/get_transaksi_detail/' + dataid, function (data) {
                $(".detail_content[dataid='" + dataid + "']").children('td').append(data);
            });
        });
    });


//    
//    $(document).ready(
//            function() {
//                setInterval(function() {
//                    cariData();
//                }, 60000);
//      });
</script>

<style>
    #table-content{
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
    }
    #table-content thead tr{
        border: 1px #191919 solid;
        line-height: 23px;
    }
    #table-content thead tr th{
        text-align: center; 
        background-color: #4cb6ea;
    }
    #table-content tbody tr {
        line-height: 20px;
        border: 1px #666 solid;
    }
    #table-content .no,#table-content .tgl,#table-content .produk,#table-content .jml,#table-content .ext{
        text-align: center;
    }

    #table-content .ext a{
        background-image: url("<?php echo base_url(); ?>static/images/ext.png");
        width: 20px;
        height: 20px;
        background-size: 19px 19px;
        display: inline-block;
        border: none;
        cursor: pointer;
    }
    #table-content .detail_content{
        display: none;
        width: 100%;
    }
    .detail_content_on{
        text-align: center;
        background-color: #f1f0f0;
    }

    button{
        width: 110px;   
        margin: 2px;
        font-size: 13px;
    }

</style>

<div id="templatemo_upcomming_event" class="container_wapper">
    <div class="container">
        <h1 align="center" style="font-family: calibri; margin-bottom: 20px;"> -------------------Monitoring Transaksi-------------------</h1>
        <table id="table-content">
            <thead>
                <tr> 
                    <th width="5%">NO</th>
                    <th width="15%">TANGGAL</th>
                    <th width="15%">PRODUK</th>
                    <th width="10%">JUMLAH</th>
                    <th>PESAN</th>
                    <th width="13%"></th>
                </tr>
            </thead>
            <tbody>
                <?php
                foreach ($list_request as $key => $value) {
                    echo"<tr class=\"list_content\" dataid=\"{$value["id_request"]}\"> 
                    <td width=\"5%\" class=\"no\">" . ($key + 1) . ".</td>
                    <td width=\"10%\" class=\"tgl\">{$value["tgl"]}</td>
                    <td width=\"10%\" class=\"produk\">{$value["id_produk"]}</td>
                    <td width=\"10%\" class=\"jml\">{$value["jumlah_beli"]}</td>
                    <td>{$value["bill_info1"]}</td>
                    <td widtd=\"13%\" class=\"ext\"><button class=\"status\">Lihat Status</button><button class=\"refresh\" disabled >Refresh Status</button></td>
                </tr>"
                    . "<tr class=\"detail_content\"  dataid=\"{$value["id_request"]}\"> 
                    <td width=\"100%\" colspan=\"6\"></td>
                </tr>";
                }
                ?>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>



